import { style } from '@vanilla-extract/css';
import { vars, Z_INDEX } from '../../theme/vars.css';

export const maskStyle = style({
	position: 'fixed',
	display: 'flex',
	flexDirection: 'column',
	alignItems: 'center',
	justifyContent: 'center',
	left: '0',
	right: '0',
	top: '0',
	bottom: '0',
	backgroundColor: 'transparent',
	WebkitUserSelect: 'none',
	userSelect: 'none',
	zIndex: Z_INDEX.MASK,
	touchAction: 'none',
	selectors: {
		'&.drag': {
			zIndex: Z_INDEX.DRAG_MASK,
		},
		'&.mask': {
			background: vars.color.mask,
			opacity: 0,
			transition: 'opacity 0.2s',
		},
		'&.mask.active': {
			opacity: 1,
		},
	},
});
